<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <!-- {{$store.getters.boys}} -->
    <!-- {{boys}} -->
    {{$store.getters.girls}}
    <!-- {{$store.getters.boysLength}} -->
    <br>
    <!-- {{$store.getters.ageStu(53)}} -->
  </div>
  <!-- 

    {
      state: {

      },
      getters: {
        getter名 (state, getters) {
          // 因为我们getter的数据就是从state中得到
          // 我们还可以从其他的getters中得到对应的数据
        },
        getter名 (state) {
          // 返回一个函数
          return (参数) => {
            // 函数中返回数据 我们就可以在函数中去添加形参
            return 数据 
          }
        }
      }
    }

    在使用时，直接返回数据的getter那么我们可以
    {{$store.getters.getter}}
    返回函数的，我们可以
    {{$store.getters.getter(参数)}}


    不管是getter还是state，使用时，我们都可以直接
    $store.getters/state.属性名

    因为太长，所以可以写在computed
    computed: {
      属性名 () {
        return this.$store.getters/state.属性名
      }
    }

   -->
  <script src="./vue.js"></script>
  <script src="./vuex.js"></script>
  <script>
    const store = new Vuex.Store({
      state: {
        stus: [
          {
            name: '张三21',
            age: 18,
            sex: '女'
          }, {
            name: '张三42',
            age: 14,
            sex: '女'
          }, {
            name: '张三42',
            age: 54,
            sex: '女'
          }, {
            name: '张三2',
            age: 34,
            sex: '女'
          }, {
            name: '张三4',
            age: 13,
            sex: '男'
          }, {
            name: '张三52',
            age: 53,
            sex: '男'
          }
        ]
      },
      getters: {
        boys (state) {
          return state.stus.filter(stu => stu.sex === '男')
        },
        girls(state){
          return  state.stus.filter(stu=>stu.sex==='女')
        },
        boysLength (state, getters) {
          return getters.boys.length
        },
        ageStu (state) {
          // return state.stus.filter(stu => stu.age > 20)
          return (age) => {
            return state.stus.filter(stu => stu.age > age)
          }
        },
        /* ageStu: state => age => state.stus.filter(stu => stu.age > age) */
      }
    })

    const app = new Vue({
      el: '#app',
      store,
      computed: {
        boys () {
          return this.$store.getters.boys
        }
      }
    })
  
  </script>
</body>
</html>